import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import { DescItem } from '@/components/Description';
import {
  sysDeptSelectOptionsApi,
  sysRoleSelectOptionsApi,
  photoTagSelectOptionsApi,
} from '@/api/select-options/SelectOptionsApi';
/**
 * 表格列
 */
export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '图片地址',
    dataIndex: 'url',
    width: 80,
  },
  {
    title: '缩略图',
    dataIndex: 'thumbnailUrl',
    width: 50,
  },
  {
    title: '点赞数',
    dataIndex: 'starCount',
    width: 80,
  },
  {
    title: '收藏数',
    dataIndex: 'favoritesCount',
    width: 80,
  },
  {
    title: '创建人',
    dataIndex: 'createdBy',
    width: 80,
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    width: 80,
  },
  {
    title: '更新时间',
    dataIndex: 'updateAt',
    width: 50,
  },
  {
    title: '更新人',
    dataIndex: 'updateBy',
    width: 80,
  },
  {
    title: '是否可见',
    dataIndex: 'isVisible',
    width: 80,
  },
];

export const insertOrUpdateFormSchema: FormSchema[] = [
  {
    field: 'id',
    // 只是为了带过来
    label: '主键ID',
    component: 'Render',
    ifShow: false,
  },
  {
    field: 'url',
    label: '图片地址',
    required: true,
    component: 'Input',
    rules: [
      {
        trigger: 'blur',
      },
    ],
  },
  {
    field: 'thumbnailUrl',
    label: '缩略图地址',
    required: true,
    component: 'Input',
    rules: [
      // 最短8位
      {
        trigger: 'blur',
      },
    ],
    // Helio: 只在新增时显示
    ifShow: ({ values }) => !isUpdateView(values),
  },

  {
    field: 'tag',
    label: '标签',
    required: false,
    component: 'ApiTreeSelect',
    componentProps: {
      labelField: 'name',
      valueField: 'id',
      placeholder: '请选择',
      immediate: true,
      api: photoTagSelectOptionsApi,
    },
  },
];
/**
 * 新增/编辑表单
 */
const isUpdateView = (values: Recordable) => {
  return !!values.id;
};
